<template>
  <div class="drag">
    <ul>
      <li ref="li" v-for="idx of 6" :key="idx" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "dragger",
  data () {
    return{
      disX:0,
      disY:0,
      zIndex:1,
      aPos:[]
    }
  },
  props:{
    data:{
      type:Array,
      default: function () {
        return []
      }
    },
    colNum:{
      type:Number,
      default:2
    }
  },
  methods: {
    touchStart(e) {
      let obj=e.target
      obj.style.zIndex=this.zIndex++
      this.disX = e.changedTouches[0].pageX-obj.offsetLeft;
      this.disY = e.changedTouches[0].pageY-obj.offsetTop;
    },
    touchMove(e){
      let obj=e.target,
      l = e.changedTouches[0].pageX -this.disX,
      t = e.changedTouches[0].pageY -this.disY;
      obj.style.opacity="0.6"
      obj.style.left = l + "px"
      obj.style.top = t + "px"
      for(let i=0;i<this.$refs.li.length;i++){
        this.$refs.li[i].className = ""
      }
      let oNear = this.findMin(obj)
      if(oNear){
        oNear.className = "active"
      }
    },
    touchEnd(e){
      //检测是否碰上，交换位置
      let obj=e.target
      var oNear = this.findMin(obj)
      obj.style.opacity=1
      if(oNear){
        oNear.className = ""
        oNear.style.zIndex = this.minZindex++
        obj.style.zIndex = this.minZindex++
        oNear.style.left=this.aPos[obj.index].left+'px'
        oNear.style.top=this.aPos[obj.index].top+'px'
        obj.style.left=this.aPos[oNear.index].left+'px'
        obj.style.top=this.aPos[oNear.index].top+'px'
        //交换index
        oNear.index += obj.index
        obj.index = oNear.index - obj.index
        oNear.index = oNear.index - obj.index
      }else{
        obj.style.left=this.aPos[obj.index].left+'px'
        obj.style.top=this.aPos[obj.index].top+'px'
      }
    },
    //碰撞检测
    colTest(obj1,obj2){
      var t1 = obj1.offsetTop
      var r1 = obj1.offsetWidth+obj1.offsetLeft
      var b1 = obj1.offsetHeight+obj1.offsetTop
      var l1 = obj1.offsetLeft

      var t2 = obj2.offsetTop
      var r2 = obj2.offsetWidth+obj2.offsetLeft
      var b2 = obj2.offsetHeight+obj2.offsetTop
      var l2 = obj2.offsetLeft

      if(t1>b2||r1<l2||b1<t2||l1>r2){
        return false;
      }else{
        return true;
      }
    },
    //勾股定理求距离
    getDis(obj1,obj2){
      var a = obj1.offsetLeft-obj2.offsetLeft
      var b = obj1.offsetTop-obj2.offsetTop
      return Math.sqrt(Math.pow(a,2)+Math.pow(b,2))
    },
    //找到距离最近的
    findMin(obj){
      let minDis = 999999999,
      minIndex = -1,
      aLi=this.$refs.li
      for(let i=0;i<aLi.length;i++){
        if(obj==aLi[i])continue;
        if(this.colTest(obj,aLi[i])){
          let dis = this.getDis(obj,aLi[i])
          if(dis<minDis){
            minDis = dis
            minIndex = i
          }
        }
      }
      return minIndex==-1 ? null : aLi[minIndex]
    } 
  },
  mounted(){
    this.$refs.li.forEach((o,i)=>{
      o.index=i
      o.style.cssText="left:"+o.offsetLeft+"px;top:"+o.offsetTop+"px;";
      this.aPos[i] = {left:o.offsetLeft,top:o.offsetTop};
      this.$nextTick(()=>{
        o.style.position="absolute"
        if(this.$refs.li[3*i+1])this.$refs.li[3*i+1].style.margin="2.5% 0 0 0"
      })
    })
  }
};
</script>
<style lang="less" scoped>
  .drag{
    ul{
      position: relative;
      margin-left: 2.5%;
      width: 100%;
      li{
        float: left;
        width: 30%;
        height: 3rem;
        background: #999;
        transition: all 0.1s;
        margin: 2.5% 0 0 0;
        &:nth-child(3n-1){
          margin: 2.5% 2.5% 0 2.5%;
        }
        &.active{
          background: #f40;
        }
      }
    }
  }
</style>
